import { useState } from 'react'
import Editor from './Editor'
import { Button } from 'antd'
import { v4 } from 'uuid'
import './App.css'
import PageContainer from './PageContainer';

function App() {
  const [count, setCount] = useState(0)
  const [fileList, setFileList] =useState([]) 

  async function openFile() {
    const sof = await showOpenFilePicker()
    const flieHandle = sof[0]
    /**
     * @type {File}
     */
    const fileData = await flieHandle.getFile();
    const arrayBuffer = await fileData.arrayBuffer();
    // const unitArr = new Uint8Array(arrayBuffer);
    // const textArr =[]; 
    // unitArr.forEach(v => {
    //   let str = v.toString(16);
    //   str = str.length == 1? `0${str}`:str 
    //   textArr.push(str)
    // });
    console.log('%c 000', 'color: #000',sof);
    console.log('%c file', 'color: #001', fileData);
    // console.log('%c unitArr', 'color:#006', unitArr);
    // console.log('%c textArr', 'color:#007', textArr);
    setFileList(QAQ=> {
      const panel = { label: fileData.name, children: (<PageContainer buffer={arrayBuffer} />), key: v4() }
      const TAT = [...QAQ]
      TAT.push(panel);
      console.log('%c ok', 'color: #002', TAT)
      return TAT
    })
    console.log('%c 看看啥情况','color:#003',fileList)
    setTimeout(v=> {
      console.log('%c 看看啥情况2','color:#004',fileList)
    }, 200)
  }

  return (
    <div className='flex w-full'>
      {fileList.length?(<Editor
        openFile={openFile}
        fileList={fileList}
      />):(<div className='flex items-center w-full h-[100vh] justify-center'>
        <Button onClick={openFile}>打开文件</Button>
      </div>)}
    </div>
  )
}

export default App
